<template>
	<view class="item_wrap" >
		<seeimg ref="mychild" />
		<view class="item_title"  @click="toDetai(itemData.id)"  >
			<view class="title_user">
				<image mode='widthFix' :src='itemData.sellerAvatar' />
				<view class="text">
					{{ itemData.sellerName }}
				</view>
			</view>
			<view class="title_love">
				<uni-icons type="forward" size="32"></uni-icons>
			</view>
		</view>
		<view class="item_data">
			{{ itemData.name }}
		</view>
		
		
		<!-- 图片展示 -->
		<view class="image-list" 
		v-if="itemData.imageList.length>0 && !itemData.showVideoSrc ">
			<view 
			v-if="itemData.imageList.length==1" 
			@click="showimg(itemData.imageList[0].src)"
			class="item_image">
				<image mode='widthFix' :src='itemData.imageList[0].src' />
			</view>
			<view 
			v-else 
			v-for="image,i in itemData.imageList" 
			:key="i"
			:class="itemData.imageList.length>2? 'item_image_three':'item_image_two'"
			@click="showimg(image.src)"
			>
				<image mode='scaleToFill' :src='image.src' />
			</view>
		</view>
		<!-- 展示视频 -->
		<view v-if="itemData.showVideoSrc" class="viewo-wrap">
			<video :src="itemData.showVideoSrc" controls></video>
		</view>
		
		<view class="item_operaton">
			<view class="category">
				{{ itemData.categoryName }}
			</view>
			<view class="num-wrap">
				
				<view class="num">
					<uni-icons type="eye" size="20"></uni-icons>
					{{ itemData.readNum }}
				</view>
				<view class="num">
					<uni-icons type="chatboxes" size="20"></uni-icons> 11
				</view>
				<view class="num">
					<uni-icons type="chatboxes" size="20"></uni-icons> 
					{{ itemData.sellNum }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import seeimg from '@/components/xw-seeimg/index'
	export default {
		mame: 'ListItem',
		props: {
			itemData: {
				default: {
					id: 1,
					imageList: [],
					name: "",
					category: "",
					price: 99,
					readNum: 0,
					userImg: "",
					username: "",
					showVideoSrc:null
				}
			}
		},
		data(){
			return {
				showVideo:false
			}
		},
		components:{seeimg},
		mounted() {
			// 
			this.imageList.forEach(v=>{
				if (v.type === 2){
					this.showVideo = true;
				}
			})
		},
		methods: {
			// 放大图片
			 showimg(src){
				this.$refs.mychild.onImg(src);
			},
			
			/**
			 * 跳转详情页
			 * @param {Object} id
			 */
			toDetai(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	// 视频
	.viewo-wrap{
		width: 100%;
		video{
			width: 100%;
			
		}
	}
	
	
	.item_wrap {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 20rpx 20rpx;
		padding-bottom: 10rpx;
		margin-bottom: 15rpx;
		background-color: #ffffff;
		// margin: 50rpx 10rpx;
		// border-bottom: 1rpx solid rgb(163, 163, 163);
		box-shadow: -2rpx -2rpx 2rpx rgb(209, 209, 209) inset;
		border-radius: 20rpx;
		
		.item_title {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title_user {
				width: 65%;

				image {
					width: 20%;
					// height:  ;
					float: left;
					border-radius: 50%;
				}

				.text {
					float: left;
					padding: 20rpx;
					width: 70%;
				}
			}

			.title_love {
				padding: 15rpx 15rpx;

				.love {
					text-align: center;
					border: 1rpx solid var(--themeColor);
					color: var(--themeColor);
					border-radius: 10%;
				}
			}
		}

		.item_data {
			flex: 1;
			height: 90rpx;
			font-size: 36rpx;
			font-weight: 500;
			display: flex;
			justify-content: left;
			align-items: center;
			color: rgb(92, 92, 92);
			display: -webkit-box;
			padding: 15rpx;
			// 不换行
			overflow: hidden;
			-webkit-box-orient: vertical;
			// 俩点S
			-webkit-line-clamp: 2;
		}
		
		//  图片区
		.image-list{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.item_image {
					
					padding: 0 10rpx;
			
					image {
						width: 680rpx;
						height: 680rpx;
					}
				}
			
				.item_image_two {
			
					padding: 0 10rpx;
					
					// background-color: black !important;
					image {
						width: 320rpx;
						height: 320rpx;
					}
				}
			
				.item_image_three {
			
					padding: 0 10rpx;
				
					image {
						width: 210rpx;
						height: 210rpx;
					}	
			}
		}
			



		.item_operaton {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 20rpx;
		
			.category{
				color: #5ca45b;
			}
			
			.num-wrap{
				display: flex;
				align-items: center;
				
				.num{
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 10rpx;
					font-size: 28rpx;
				}
			}
		}
	}



	
</style>